<script setup lang="ts">
interface IUser {
  userId: number;
  userName: string;
  depName: string;
  headerImg: string;
}

interface IWeather {
  weather: string;
  temperature: number | string;
}

interface IProps {
  // 接收一个字符串类型的icon
  bgIcon: string;
  user: IUser;
  locationCity?: string; // 可选参数（加 ? 表示可传可不传）
  // 接收一个对象类型的用户信息
  nowWeather?: IWeather;
  // 接收一个布尔类型的参数
  bigBg?: boolean;
}

withDefaults(defineProps<IProps>(), { bigBg: false });
// 设置默认值
</script>

<template>
  <view class="user-card flex justify-between items-center position-relative overflow-hidden">
    <view class="flex text-14 line-height-5">
      <up-avatar :src="user.headerImg"></up-avatar>
      <view class="user-card-left__info ml-2">
        <view>{{ user.userName }}</view>
        <view>{{ user.depName }}</view>
      </view>
    </view>
    <view class="flex items-center">
      <view>
        <view class="text-18">{{ locationCity || '- - - -' }}</view>
        <view class="text-10">
          {{ nowWeather?.weather || '--' }}&nbsp;&nbsp;{{ nowWeather?.temperature || '？' }}℃
        </view>
      </view>
    </view>
    <img
      :class="bigBg ? 'user-card__bigbg' : 'user-card__bg'"
      :src="`../../static/images/${bgIcon}.webp`"
    />
  </view>
</template>

<style lang="scss" scoped>
.user-card {
  height: 200rpx;
  background: #fff;

  // border-radius: 20rpx;
  margin: auto;
  box-sizing: border-box;
  padding: 0 20rpx 0 32rpx;

  &__bg {
    position: absolute;
    top: -28rpx;
    right: 16rpx;
    width: 340rpx;
  }

  &__bigbg {
    position: absolute;
    top: -108rpx;
    right: -20rpx;
    width: 504rpx;
  }
}
</style>
